<template>
  <div class="">
    <v-chart class="chart" :option="chart" autoresize />
  </div>
</template>

<script>
const xLabel = ["一月", "二月", "三月", "四月", "五月", "六月"];
const goToSchool = ["40", "60", "22", "85", "50", "40"];
const goOutSchool = ["20", "50", "12", "65", "30", "60"];
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
// 引入vue-echarts
import VChart from "vue-echarts";
export default {
  name: "EfficiencyCard",
  components: {
    VChart,
  },
  props: {
    jdata: {
      type: Array,
      required: true,
      default() {
        return goToSchool;
      },
    },
    qdata: {
      type: Array,
      required: true,
      default() {
        return goOutSchool;
      },
    },
    xLabel: {
      type: Array,
      required: true,
      default() {
        return xLabel;
      },
    },
  },
  computed: {
    chart() {
      return {
        textStyle: {
          fontSize: this.$utils.transformFontSize(16),
          color: "#fff",
        },
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          align: "left",
          right: "12%",
          top: "12%",
          type: "plain",
          textStyle: {
            color: "#7ec7ff",
            fontSize: this.$utils.transformFontSize(16),
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 18,
          icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
          data: [
            {
              name: "今年",
            },
            {
              name: "去年",
            },
          ],
        },
        grid: {
          top: "15%",
          left: "10%",
          right: "10%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              textStyle: {
                color: "#78bdf5",
                padding: 16,
                fontSize: this.$utils.transformFontSize(14),
              },
              formatter: function(data) {
                return data;
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
            axisTick: {
              show: false,
            },
            data: this.xLabel,
          },
        ],
        yAxis: [
          {
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#78bdf5",
                padding: 16,
              },
              formatter: function(value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "今年",
            type: "line",
            symbol: "none", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 16,
            smooth: true,
            lineStyle: {
              normal: {
                width: 4,
                color: "#ff9b00", // 线条颜色
              },
            },
            itemStyle: {
              color: "#ff9b00",
            },
            areaStyle: {
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,155,0,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,155,0, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.jdata,
          },
          {
            name: "去年",
            type: "line",
            // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            symbol: "none", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 16,
            smooth: true,
            lineStyle: {
              normal: {
                width: 4,
                color: "#00ffff", // 线条颜色
              },
            },
            itemStyle: {
              color: "#00ffff",
            },
            areaStyle: {
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,255,255,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,255,255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.qdata,
          },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
